<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>空明物联网服务平台</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/base.css" />
</head>

<body>
    <div class="container-fluid">
        <div class="form-inline">
            <br />
            <input class="form-control" type="text" id="query" placeholder="设备名称、SN码" style=" width: 320px;">
            <select class="form-control" id="offline" style=" width:100px;">
                <option value="0">全部</option>
                <option value="1">在线</option>
                <option value="2">离线</option>
            </select>
            <button type="button" id="search" class="btn btn-primary">搜索</button>
            <button type="button" class="btn btn-primary"  onclick="window.location.href='device_add.html'">添加</button>
        </div>
        <hr />
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>名称</th>
                    <!-- <th>SN</th> -->
                    <th>状态</th>
                    <th>最后上线时间</th>
                    <th>平均网络延时</th>
                    <th>磁盘占用率(%)</th>
                    <th>空闲内存(KB)</th>
                    <th>空闲CPU(%)</th>
                    <th>I/O使用率(%)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="result">
            </tbody>
        </table>
    </div>

    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script src="/static/js/base.js?value=1.0.0"></script>
    <script>
        var dones = false;  // 最后页状态
        var page = 1;   // 当前页
        var limit = 15; // 分页大小
        var offline = 0; // 离线状态


        $(document).ready(function(){
            getDataSet(page, limit);
        });


        // 打开详情页面
        function open_info(uuid) {
            window.location.href = "device_info.html?uuid=" + uuid;
        }



        function getDataSet(page, limit, offline = 0, query = '') {
            new AjaxRequest({
                type: "get",
                url: getServiceURL('devicestates'),
                param: {
                    "page": page,
                    "limit": limit,
                    "offline": offline,
                    "query": query,
                },
                callBack: function(res) {
                    if (res.code == 0) {
                        var data = res.data.device;
                        var trHtml
                        trHtml = ""
                        for (var i = 0; i < data.length; i++) {

                            var offline;
                            var status;

                            // 对在线设备名称给不同颜色
                            if (data[i].offline == 1) {
                                offline = "<p style='color: #5bb75b;'>" + data[i].name + "</p>"
                            } else{
                                offline = data[i].name
                            }

                            if (data[i].status == 1) {
                                status = "<p style='color: #5bb75b;'>已激活</p>"
                            } else{
                                status = "<p style='color: #faa732;'>未激活</p>"
                            }
                            trHtml += "<tr>";
                            trHtml += "<td>" + offline + "</td>"
                            trHtml += "<td>" + status + "</td>"
                            trHtml += "<td>" + data[i].online_time + "</td>"
                            trHtml += "<td>" + data[i].monitor['pingtime'] + "</td>"
                            trHtml += "<td>" + data[i].monitor["diskusage"] + "</td>"
                            trHtml += "<td>" + data[i].monitor["freemem"] + "</td>"
                            trHtml += "<td>" + data[i].monitor["cpuidle"] + "</td>"
                            trHtml += "<td>" + data[i].monitor["ioutil"] + "</td>"
                            trHtml +=
                                '<td><button type="button" class="btn btn-default btn-xs" onClick="open_info(\'' +
                                data[i].uuid +
                                '\');">详情</button></td>'
                            trHtml += "</tr>"
                        }
                        $("#result").append(trHtml);

                        // 判断是否加载完了 
                        if (res.data.device.length == 0) {
                            dones = true;
                        }
                        
                    }
                    console.log(res);
                }
            });
        }


        // 清除列表框数据，使其初始化状态
        function clear(){
            page = 1;
            dones = false;
            $("#result").html("");
        }

        // 当滚动到底部以上200像素，并且不是最后一页时,加载新内容 
        $(window).scroll(function() {
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 200) {
                if (!dones) {
                    console.log("已经是最后一页了");
                    page = page + 1;
                    getDataSet(page, limit, offline );
                }
            };
        });

        // 搜索按钮被点击
        $("#search").click(function() {
            clear();
            offline = $("#offline").val();
            var query = $("#query").val();
            getDataSet(page, limit, offline, query);
        });
    </script>
</body>

</html>